extends layout

block head
  link(
    rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
    crossorigin="anonymous"
  )
  link(
    rel="stylesheet"
    href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/default.min.css"
  )
  script(
    src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" 
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
    crossorigin="anonymous"
  )
  script(
    src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"
    crossorigin="anonymous"
  )
  script(
    src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" 
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
    crossorigin="anonymous"
  )
  link(rel="stylesheet", href="/public/utf8-php/third-party/SyntaxHighlighter/shCoreDefault.css")
  script(charset="utf-8" src="/public/utf8-php/third-party/SyntaxHighlighter/shCore.js")
  script(charset="utf-8" src="/public/utf8-php/ueditor.config.js")
  script(charset="utf-8" src="/public/utf8-php/ueditor.all.min.js")
  script(charset="utf-8" src="/public/utf8-php/lang/zh-cn/zh-cn.js")
block header 
  include header
block content
  div(class="container")
    form(class="form-horizontal" id="default-form")
      div(class="form-group")
        label(class="col-sm-1 control-label")="autoprefixer"
        div(class="col-sm-11")
          input#autoprefix-config(class="form-control" value=overrideBrowserslist)
    div(class="form-group")
      script#editor(type="text/plain" style="width:100%;height:300px;")
    div(class="form-group text-right")
      button(class="btn btn-primary" form="default-form")="编 译"
    div(class="form-group")
      textarea#autoprefixer-css(class="form-control" rows="10")
    div(class="form-group text-right")
      button#prevcss-btn(type="button" class="btn btn-primary" data-toggle="modal" data-target="#prevcss")="预 览"
    //- preview css modal
    div(class="modal fade" tabindex="-1" role="dialog" id="prevcss" aria-labelledby="myLargeModalLabel")
      div(class="modal-dialog modal-lg" role="document")
        div(class="modal-content")
          div(class="modal-header")
            button(type="button" class="close" data-dismiss="modal" aria-label="Close")
              span(aria-hidden="true")="x"
            h4(class="modal-title")="预 览"
          div#preview-css-body(class="modal-body" style="height:450px;overflow-y:auto")="loading"
          div(class="modal-footer")
            button(type="button" class="btn btn-default" data-dismiss="modal")="关闭"
  script.
    ;(function(controlFn){
      //- 初始化富文本编辑器
      var ue = UE.getEditor('editor');
      ue.ready(function(){
        ue.execCommand( "insertcode", 'css' );
        SyntaxHighlighter.all();
      })
      var control = controlFn(ue);
      //- 编译
      $('form').submit(function(event){
        event.preventDefault();
        control.compile();
      })
      //- 预览
      $('#prevcss-btn').click(function(){
        control.preview()
      })
    })(function(ue){
      //- 编译与预览公共请求函数
      function compile(isPreview){
        $.ajax({
          url:location.href,
          type:'post',
          data:{
            css:ue.getContentTxt(),
            overrideBrowserslist:$('#autoprefix-config').val() || '[]',
            isPreview: isPreview || false
          },
        }).then(function(res){
          if(isPreview){
            $('#preview-css-body').html(res);
          }else{
            $('#autoprefixer-css').val(res)
          }
        })
      }

      return {
        compile:function(){//编译函数
          compile();
        },
        preview:function(){//预览函数
          compile(true);
        }
      }
    })
